大前端

1.2.5 Create-react-app+Antd+Less配置

最开始使用 Create-react-app 搭建项目，引入 antd,后来在写组件的时候发现引入 less 文件样式未生效

之后开始配置,看到很多的文章中提到收拾配置 webpack ;有的地方看到了 React-app-rewired

1.暴露webpack配置文件

使用 create-react-app 创建的项目，默认情况下是看不到 webpack 相关的配置文件，我们需要给它暴露出来，使用

yarn eject


? Are you sure you want to eject? This action is permanent. Yes
1
2
3
4

目录多了一个config文件夹

2.安装

yarn add less less-loader
1

3.修改 webpack.config.js

{
  test: /\.(css|less)$/,
  use: [
    require.resolve('style-loader'),
    /*{
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },*/
    
    {
      loader: require.resolve('less-loader') // compiles Less to CSS
    }
  ],
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

配置好后重新 yarn start,报错：

Error: [BABEL] H:\react\antd-demo\src\index.js: Cannot find module '@babel/plugin-transform-react-jsx-source' (While processing: "H:\\react\\antd-demo\\node_modules\\babel-preset-react-app\\index.js$1")
1
  • 解决办法： 先删除 node_modules ,再 yarn install,yarn start

又出现 indent 缩进问题，原来 我编辑器设置 2 ，.eslitrc.js 中配置的 4，

又遇到less 问题

"less": "^3.9.0",
"less-loader": "^4.1.0",
"webpack": "4.28.3",

Failed to compile.

./src/container/login/login.less (./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/file-loader/dist/cjs.js??ref--7-oneOf-7!./src/container/login/login.less)

module.exports = __webpack_public_path__ + "static/media/login.50cb196b.less";
             ^
Unrecognised input
      in H:\react\antd-demo\src\container\login\login.less (line 1, column 15)
1
2
3
4
5
6
7
8
9

确实没有 vue 的配置好

这一栏就是less 文件加载问题，说明我前面配置的 less-loader 有问题

最后又去找一些配置

修改 webpack.config.js

# 1.添加正则
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

# 2.在 `module: { rules 中 有一个 oneOf` 内添加配置
1
2
3
4
5
6
7
8
9
10

{ // "oneOf" will traverse all following loaders until one will // match the requirements. When no loader matches it will fall // back to the "file" loader at the end of the loader list. oneOf: [


# 配置less
{
  test: lessRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap
    },
    'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent
    },
    'less-loader'
  )
},
// "file" loader makes sure those assets get served by WebpackDevServer.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

参考

← 1.2.5.1 react Expected to return a value in arrow function →